<template>
	<view class="">
		<!-- 招标信息 -->
		<view class="active-list">

			<view class="active-title">
				<view class="active-top">
					<text class="">*</text>姓名<text class="tip" v-if="blurNameNullShow">请输入采购联系人</text>
				</view>
				<u--textarea placeholder="请输入采购联系人(必填)" @blur="nameBlur(name)" v-model="name" border="none"
					maxlength="12"></u--textarea>
			</view>

			<view class="active-title">
				<view class="active-top">
					<text class="">*</text>联系电话<text class="tip" v-if="blurPhoneNumNullShow">请输入联系电话</text>
				</view>
				<u--textarea :formatter="numFormatter" placeholder="请输入联系电话(必填)" @blur="phoneBlur(phone)"
					v-model="phone" border="none" maxlength="20"></u--textarea>
			</view>

			<view class="active-title">
				<view class="active-top">
					职位
				</view>
				<view class="textareaPh" :style="{color:position?'#606266':'#c0c4cc'}" @click="positionFocus">
					{{position.trim()||'请选择您的职位'}}
				</view>
				<!-- 	<u--textarea placeholder="请选择您的职位(必填)" @focus="positionFocus" v-model.trim="position" read
					border="none">
				</u--textarea> -->

			</view>

			<view class="active-title">
				<view class="active-top">
					<text class="">*</text>所在城市
				</view>
				<u--textarea placeholder="点击选择您的公司所在地(必填)" @focus="areaFocus" v-model="areaVal" border="none">
				</u--textarea>

			</view>

			<view class="active-title">
				<view class="active-top">
					<text class="">*</text>采购产品<text class="tip" v-if="blurProNullShow">请输入采购产品</text>
				</view>
				<u--textarea placeholder="请填写采购产品名称(必填)" @blur="proBlur(productName)" v-model="productName"
					border="none" maxlength="30"></u--textarea>
			</view>

			<view class="active-title">
				<view class="active-top">
					<text class="">*</text>采购数量
					<text class="tip" v-if="blurProNumNullShow">请输入数量</text>
				</view>
				<view class="num-box">
					<u-number-box v-model="productNum" :min="1" :max="999999" integer
						inputWidth="130rpx"></u-number-box>
				</view>

				<!-- 	<u--textarea :formatter="numFormatter" ref="textarea" placeholder="请填写采购产品数量(必填)"
					@blur="proNumBlur(productNum)" v-model="productNum" border="none" maxlength="10">
				</u--textarea> -->
			</view>

			<view class="active-title">
				<view class="active-top">
					<text class="">*</text>采购期限
				</view>
				<u-radio-group v-model="buyRadiovalue" class="buy-radio" placement="row" @change="groupChange"
					iconSize="32" size="32">
					<u-radio :customStyle="index==0?customStyle0:customStyle1" iconSize="32rpx" labelSize="32rpx"
						v-for="(item, index) in buyRadiolist" :key="index" :label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
				<view class="buy-many" v-if="buyManyShow">
					*选择长期采购后,每10天您的采购需求单将被重新发布曝光
				</view>
			</view>


			<view class="active-title active-time" v-show="buyOneShow">
				<view class="active-top">
					<text class="">*</text>截止日期
				</view>
				<!-- <text @click="startClick" class="start-time">{{startTime}}</text> -->
				<u--textarea placeholder="有效期不超过一个月" @focus="startClick" v-model="startTime" border="none">
				</u--textarea>
			</view>
			<view class="active-title describe-title">
				<view class="active-top">
					产品描述<text class=""></text>
				</view>
				<u--textarea placeholder="完善采购信息,帮助供应商了解你的采购需求" autoHeight v-model="productDescribe" border="none"
					maxlength="200"></u--textarea>
			</view>

			<view class="active-title active-info">
				<view class="active-top">
					<!-- <text class="">*</text> -->
					图片
				</view>
				<view class="active-img-des">
					请上传采购产品相关图片，如产品细节图、采购清单等
				</view>
				<view class="active-info-img">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="3" width="204rpx" height="204rpx">
					</u-upload>
				</view>
			</view>

			<view class="sign-up">
				<u-button type="primary" color="#2684ff" text="立即发布" :throttleTime="600" @click="submitActive"
					:loading="submitLoad">
				</u-button>
			</view>

		</view>

		<u-calendar :show="timeShow" :maxDate="maxDate" @confirm="dateConfirm" @close="dateClose"
			closeOnClickOverlay="true"></u-calendar>

		<!-- 职位选择 -->
		<u-popup :show="positionShow" @close="positionClose" closeable round="16">
			<view class="positon-box">
				<view class="title">
					职位
				</view>
				<view class="pos-title">
					职位
				</view>
				<view class="pos-input">
					<u--input placeholder="手动填写您的职位(2-10个字)" border="surround" v-model.trim="postionValue"
						@change="postionChange" clearable maxlength="10"></u--input>
				</view>
				<view class="pos-subtitle">
					快速选择
				</view>
				<view class="pos-select">
					<view :class="[positionActiveIndex==index?'pos-select-active-box':'pos-select-box']"
						v-for="(item,index) in postionLists" @click="postionClick(item,index)" :key="index">
						{{item}}
					</view>
				</view>
				<view class="pos-button">
					<view class="pos-button-cancel" @click="posCancel">
						取消
					</view>
					<view class="pos-button-confirm" @click="posConfirm">
						确认
					</view>
				</view>

			</view>
		</u-popup>
		<!-- 城市选择 -->
		<chose-city class="area-page" @selectCity="selectCity" v-if="areaShow" @closeModal="closeSelectCityModal">
		</chose-city>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	import baseConfig from '@/config/baseUrl.js'
	import choseCity from '@/pagesBusiness/components/chose-city/chose-city.vue'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			choseCity
		},
		data() {
			return {
				name: '', //姓名
				phone: '', //电话
				areaVal: '', //所在城市
				position: '', //职位
				positionActiveIndex: -1, //选中职位
				positionShow: false, //职位隐藏
				submitLoad: false, //提交加载
				postionLists: ["企业负责人", "总经理", "个体工商户", "业务总监", "销售总监", "市场总监", "业务经理", "销售经理", "市场经理", "销售/业务员", "项目经理",
					"工程师"
				],
				postionValue: '', //职位
				blurNameNullShow: false, //姓名未填显示
				blurPhoneNumNullShow: false, //电话未填显示
				areaShow: false, //城市显示

				blurProNullShow: false, //采购产品输入信息为空失焦显示
				productName: '', //采购产品输入信息
				blurProNumNullShow: false, //采购产品数量输入信息为空失焦显示
				productNum: 1, //采购产品数量输入信息

				// 基本案列数据
				buyRadiolist: [{
						name: '单次采购',
						id: 1,
						disabled: false
					},
					{
						name: '长期采购',
						id: 0,
						disabled: false
					}
				],
				//单次采购或者长期采购的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				buyRadiovalue: '',
				buyOneShow: false, //单次采购截止日期显示
				buyManyShow: false, //长期采购显示
				maxDate: `${year}-${month}-${date + 31}`,
				customStyle0: {
					marginBottom: '8px',
					fontSize: '32px',
					marginLeft: '0'
				},
				customStyle1: {
					marginBottom: '8px',
					fontSize: '32px',
					marginLeft: '15px'
				},
				productDescribe: '',

				imageUrl: '', //图篇
				imgArr: [],
				fileList1: [],
				// 开始时间事件显示隐藏
				timeShow: false,
				status: "-1", //状态0:长期  1:单次
				startTime: '', //单次采购的截止时间
				historyInfo: null,
				editId: '',
				editSubmit: false, //编辑提交
			}
		},
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			// this.$refs.textarea.setFormatter(this.numFormatter)
		},
		onLoad(option) {
			if (option.editId) {
				this.editId = option.editId
				this.queryEditInfo()
				this.editSubmit = true
			} else {
				this.editSubmit = false
			}
			this.userInfo = uni.getStorageSync('_userInfo')
			console.log(this.userInfo)
		},
		onShow() {

		},
		methods: {

			queryEditInfo() {
				this.$api.queryMyCouponListsById(this.editId).then(res => {
					console.log(res)
					if (res.success) {
						this.$store.commit('setMyBuyInfo', res.result)
						console.log(res)
						if (res.success) {
							this.name = res.result.userName
							this.phone = res.result.userTel
							this.position = res.result.userPosition
							this.areaVal = res.result.city

							this.productName = res.result.name

							this.productNum = res.result.buyNum

							this.status = res.result.status
							if (this.status == '1') {
								this.buyRadiovalue = '单次采购'
								this.groupChange('单次采购')
								this.startTime = res.result.endTime
							} else {
								this.buyRadiovalue = '长期采购'
								this.groupChange('长期采购')
							}
							this.productDescribe = res.result.perfile
							if (res.result.fileList == '') {
								this.fileList1 = []
							} else {
								let imgLists = []
								this.fileList1 = []
								imgLists = res.result.fileList.split(',')
								// imgLists=this.parseString(res.result.fileList)
								console.log(imgLists)
								console.log(this.fileList1)
								if (imgLists.length != 0) {
									this.fileList1 = []
									imgLists.forEach(item => {
										let date = {
											message: "",
											size: 2351629,
											status: "success",
											thumb: item,
											type: "image",
											url: item
										}
										this.fileList1.push(date)
									})
								} else {
									this.fileList1 = []
								}
							}

						}
					}
				})
			},

			// 数量输入框限制输入字数
			numFormatter(value) {
				// 让输入框只能输入数值，过滤其他字符
				return value.replace(/[^\d]/g, "")
			},
			parseString(str) {
				// 一个 flag 标识当前的对应结束点
				let right = null;
				let parent = null;

				let key = '';
				let value = '';

				for (let i = 0; i < str.length; i++) {
					const letter = str[i];

					if (letter === '[') {
						// 这里是一个“高街元素”，做好笔记！
						// 小老虎这里巧妙地将相对应右括号记录下来，
						// 这样在下面判断结束的时候就会变得相当便捷。
						right = ']';
						parent = new Array();
					} else if (letter === ']') {
						if (right === letter && value) {
							parent.push(value);
							value = '';
							right = null;
						}
					} else if (letter === ',') {
						if (right === ']') {
							parent.push(value);
							value = '';
						}
					} else {
						// non empty
						if (letter && letter !== ' ') {
							value += letter;
						}
					}
				}
				return parent;
			},

			// 姓名失焦
			nameBlur(e) {
				console.log(e)
				if (e) {
					this.blurNameNullShow = false
				} else {
					this.blurNameNullShow = true
				}
			},
			// 采购产品数量失焦
			phoneBlur(e) {
				console.log(e)
				if (e) {
					this.blurPhoneNumNullShow = false
				} else {
					this.blurPhoneNumNullShow = true
				}
			},

			// 职位聚焦事件
			positionFocus() {
				this.positionShow = true
			},
			// 职位弹窗关闭事件
			positionClose() {
				this.positionShow = false
			},

			postionChange(val) {
				console.log(val)
			},
			// 职位点击
			postionClick(item, index) {
				console.log(item, index)
				this.positionActiveIndex = index
				this.postionValue = item
				let obj = this.postionLists.find(ele => {
					return ele == item
				})
				console.log(obj)
			},
			// 职位取消选择
			posCancel() {
				this.positionActiveIndex = -1
				this.postionValue = ''
				this.positionShow = false
			},
			// 职位确认选择
			posConfirm() {
				if (this.postionValue.trim() == '') {
					this.$showToast('请选择或者填写职位')
					return false
				} else if (this.postionValue.length < 2) {
					this.$showToast('请至少输入2个字')
					return false
				}
				this.position = this.postionValue
				this.positionShow = false

			},

			// 公司所在地聚焦
			areaFocus() {
				this.areaShow = true
			},
			areaSelectName(val) {
				console.log("子传父")
				console.log(val)
				this.areaVal = val
				this.areaShow = false
			},
			// 城市选择
			select(data) {
				console.log(data.name)
				this.areaVal = data.name
				if (data.name) {
					this.areaShow = false
				}
			},
			// 采购产品失焦
			proBlur(e) {
				console.log(e)
				if (e) {
					this.blurProNullShow = false
				} else {
					this.blurProNullShow = true
				}
			},
			// 采购产品数量失焦
			proNumBlur(e) {
				console.log(e)
				if (e) {
					this.blurProNumNullShow = false
				} else {
					this.blurProNumNullShow = true
				}
			},
			// 单次采购和长期采购选择切换
			groupChange(n) {
				console.log('groupChange', n);
				this.buyRadiovalue = n
				if (this.buyRadiovalue == "单次采购") {
					this.buyOneShow = true
					this.buyManyShow = false
					this.status = 1
					this.startTime = ''
				} else {
					this.buyOneShow = false
					this.buyManyShow = true
					this.status = 0
					this.startTime = ''
				}
			},
			// 日期选择确认
			dateConfirm(e) {
				console.log(e)
				this.startTime = e[0]
				this.timeShow = false
				console.log(this.startTime)
			},
			// 日期选择关闭
			dateClose() {
				this.timeShow = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event.file[0])
				// this.imageUrl = event.file[0].url
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseConfig.uploadUrl + '/casugn-system/sys/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log("测试一下上传视频")
							if (data.success) {
								this.imageUrl = data.message
								// this.videoUrl=data.message
								resolve(data.message)
							}
						}
					});
				})
			},
			// 截止时间选择
			startClick() {
				this.timeShow = true
			},

			// 提交活动
			submitActive() {
				this.fileList1.forEach(item => {
					this.imgArr.push(item.url)
				})
				if (this.name == "") {
					uni.showToast({
						title: "姓名不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.phone == "") {
					uni.showToast({
						title: "联系电话不能为空",
						icon: 'none'
					});
					return false
				}
				// if (this.position == '') {
				// 	uni.showToast({
				// 		title: "职位不能为空",
				// 		icon: 'none'
				// 	});
				// 	return false
				// }
				if (this.areaVal == "") {
					uni.showToast({
						title: "所在城市不能为空",
						icon: 'none'
					});
					return false
				}



				if (this.productName == "") {
					uni.showToast({
						title: "采购产品名称不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.productNum == "") {
					uni.showToast({
						title: "采购产品数量不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.status == '-1') {
					uni.showToast({
						title: "请选择采购期限",
						icon: 'none'
					});
					return false
				}
				if (this.status == "1") {
					if (this.startTime == "") {
						uni.showToast({
							title: "截止时间不能为空",
							icon: 'none'
						});
						return false
					}
				}



				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let data = {
					openId: openId.openid,
					name: this.productName,
					buyNum: this.productNum,
					endTime: this.startTime,
					status: this.status,
					fileList: this.imgArr.toString(),
					perfile: this.productDescribe,
					userName: this.name,
					userTel: this.phone,
					userPosition: this.position,
					city: this.areaVal,
					id: this.editId
				}
				if (this.submitLoad === true) return
				this.submitLoad = true
				let method = this.editSubmit ? 'purchaseEditSubmit' : 'purchaseSubmit'
				this.$api[method](data).then(res => {
					if (res.success) {
						this.$showToast(this.editSubmit ? '编辑成功' : '发布成功')
						setTimeout(() => {
							this.submitLoad = false
							uni.navigateBack()
						}, 800)
					} else {
						this.$showToast(res.message)
						this.submitLoad = false
					}
				})
			},
			//选择城市
			selectCity(data) {
				console.log(data, '选择城市回调');
				this.areaVal = data.name
				if (data.name) {
					this.areaShow = false
				}
			},
			//关闭选择城市弹窗
			closeSelectCityModal() {
				this.areaShow = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {}

	::v-deep {
		.u-popup__content__close {
			.uicon-close {
				font-size: 30rpx !important;
				line-height: 30rpx !important;
				padding-left: 20rpx !important;
			}
		}

		.u-popup__content__close {
			z-index: 10 !important;
		}

		.u-border {
			border-width: 0 !important;
		}

		.uicon-checkmark {
			font-size: 13px !important;
			top: -4px !important;
		}

		.u-upload__deletable__icon {
			.uicon-close {
				font-size: 11px !important;
				top: 3px !important;
			}
		}

		.u-number-box__minus,
		.u-number-box__input,
		.u-number-box__plus {
			height: 44rpx !important;
		}
	}

	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #f6f6f6;
		padding: 41upx 32upx 100upx;
		position: relative;

		.active-title {
			letter-spacing: 3upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			// height: 110upx;
			border-bottom: 1px solid #f6f6f6;
			margin-top: 20upx;

			.textareaPh {
				font-size: 30rpx;
				height: 35px;
				margin-top: 25rpx;
			}

			.num-box {
				margin-top: 25rpx;
				height: 38px;
			}

			.active-top {
				font-size: 26upx;
				font-weight: bold;

				.tip {
					margin-left: 8upx;
				}

				text {
					color: red;
					margin-right: 5upx;
				}
			}

			.buy-radio {}

			.buy-many {
				font-size: 22upx;
				color: #2979ff;
				padding-bottom: 10upx;
			}

			::v-deep .u-radio-group {
				margin-top: 20upx;
				margin-bottom: 20upx;
			}

			::v-deep .u-textarea {
				margin-top: 25upx;
				display: flex;
				justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size: 30upx;
			}

			::v-deep .u-textarea__count {
				position: relative;
			}
		}

		.describe-title {

			::v-deep .u-textarea {
				margin-top: 25upx;
				// display: flex;
				display: block;
				// justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size: 30upx;
			}

			::v-deep .u-textarea__count {
				position: relative;
				display: block;
				text-align: right;
				margin-top: 10upx;
			}
		}

		.active-info {
			border-bottom: 1upx solid #EEEEEE;

			// padding: 37upx 0;
			.active-img-des {
				font-size: 24upx;
				color: rgb(153, 153, 153);
				margin-top: 20upx;
			}

			.active-info-img {
				margin: 0 auto;
				// margin-top: 30upx;
				// width: 690upx;
				// height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;
				margin-top: 20upx;

				// border-bottom: 1upx solid #EEEEEE;
				// img {
				// 	width: 690upx;
				// 	height: 350upx;
				// }

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}


		.sign-up {
			margin-top: 120upx;
		}
	}

	.positon-box {
		padding: 0 32rpx;
		font-size: 26rpx;

		.title {
			height: 92rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 92rpx;
			text-align: center;
		}

		.pos-title {

			margin: 32rpx 0 16rpx;
			line-height: 36rpx;
		}

		.pos-input {
			border-bottom: 1px solid #E5E6EB;

			::v-deep {
				.u-input {
					padding-left: 0 !important;
				}

				.uicon-close {
					font-size: 20rpx !important;
					padding-left: 0;
				}
			}
		}

		.pos-subtitle {
			margin-top: 32rpx;
			color: #666666;
		}

		.pos-select {
			margin-top: 20upx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			font-size: 28rpx;

			.pos-select-box {
				width: 200upx;
				background: #f5f5f5;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
				border-radius: 10upx;
			}

			.pos-select-active-box {
				width: 200upx;
				background: #E9F0FD;
				color: #2684ff;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
			}
		}


	}

	.pos-button {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 56upx;
		font-size: 30rpx;
		padding-bottom: 20rpx;

		.pos-button-cancel,
		.pos-button-confirm {
			border-radius: 4rpx;
			width: 45%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
		}

		.pos-button-cancel {
			color: #2684ff;
			background-color: #E9F0FD;
		}

		.pos-button-confirm {
			background: #2684ff;
			color: white;
		}
	}

	.area-page {
		position: absolute;
		z-index: 50;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: white;
	}
</style>D
